<div
  v-kb-modal="isShow"
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button @click="onHideExportModal" class="close"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">{{
          Kooboo.text.component.exportModal.title
        }}</h4>
      </div>
      <div class="modal-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-md-3">{{
              Kooboo.text.component.exportModal.exportType
            }}</label>
            <div class="col-md-9">
              <label class="radio-inline"
                ><input
                  type="radio"
                  name="exportType"
                  v-model="exportType"
                  value="complete"
                />
                {{ Kooboo.text.component.exportModal.complete }}
              </label>
              <!-- <label class="radio-inline"><input type="radio" name="exportType" data-bind="checked: exportType" value="increasment">Increment</label> -->
              <label class="radio-inline"
                ><input
                  type="radio"
                  name="exportType"
                  v-model="exportType"
                  value="custom"
                />
                {{ Kooboo.text.component.exportModal.custom }}
              </label>
            </div>
          </div>
          <div class="form-group" v-if="exportType !== 'complete'">
            <template v-if="exportType == 'increasment'">
              increasment
            </template>
            <template v-else-if="exportType == 'custom'">
              <label class="control-label col-md-3">{{
                Kooboo.text.component.exportModal.exportContent
              }}</label>
              <div class="col-md-9">
                <a
                  v-for="$data in exportContents"
                  href="javascript:;"
                  class="label label-sm kb-table-label-refer"
                  :class="{ green: $data.selected, gray: !$data.selected }"
                  @click="onContentSelected($data)"
                  >{{ $data.displayName }}</a
                >
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button @click="onExport" class="btn green">{{
          Kooboo.text.common.start
        }}</button>
        <button @click="onHideExportModal" class="btn gray">{{
          Kooboo.text.common.cancel
        }}</button>
      </div>
    </div>
  </div>
</div>
